매우 훌륭한 자바스크립트: 프로그래밍의 현대적 입문서: 고성능 그래픽으로 전환하기

컴퓨터 그래픽에서 우리는 다음을 구분합니다: 벡터 과 비트맵 그래픽입니다. 벡터 그래픽(예: SVG)은 논리적인 형태를 통해 이미지를 설명합니다. 모든 요소는 DOM 내에 지속적으로 존재하는 객체입니다. 반대로 비트맵 그래픽(예: HTML5 Canvas)은 색점의 래스터.

1. 캔버스로의 전환

SVG는 CSS를 통해 스타일링하기가 더 쉽지만, 브라우저는 각 노드를 추적해야 합니다. 고성능이 필요한 경우, 수천 개의 움직이는 요소를 가진 게임처럼, 캔버스 API가 더 우수합니다. 이는 그림을 그리는 표면을 포함하는 단일 DOM 요소를 제공하며, 본질적으로 '백슬레이트'와 같습니다.

2. 그리기 컨텍스트

그리기 <canvas> 요소는 초기화하기 전까지는 '블랙박스'입니다. 컨텍스트. 이 객체의 메서드는 실제 그리기 인터페이스를 제공하며, 디스플레이 요소를 렌더링 로직에서 분리합니다.

var context = canvas.getContext("2d");

3. 네임스페이스 인식

SVG와 같은 기반을 갖춘 XML 그래픽에서, xmlns="http://www.w3.org/2000/svg" 속성은 매우 중요합니다. 브라우저가 일반적인 HTML 파싱에서 특정 그래픽 스키마로 전환하도록 신호를 보내며, 형태 태그가 상호작용 가능한 객체로 인식되도록 해줍니다.

TERMINALbash — 80x24

> Ready. Click "Run" to execute.

QUESTION 1

What is the primary difference between Vector and Bitmap graphics?

Vector uses pixel data; Bitmap uses logical shapes.

Vector uses logical shape descriptions; Bitmap uses a grid of colored dots.

Vector is always faster for game rendering.

Bitmap elements remain persistent in the DOM.

QUESTION 2

What is the purpose of the xmlns attribute in an SVG tag?

To define the width and height of the viewport.

To link an external CSS stylesheet.

To change the element to a different XML namespace for specific schema recognition.

To enable hardware acceleration for bitmap rendering.

QUESTION 3

How do you access the drawing interface for an HTML5 Canvas?

By modifying the .style.color property of the canvas.

By calling the getContext('2d') method on the canvas element.

By inserting SVG tags inside the <canvas> tags.

By using the document.draw() global function.

QUESTION 4

Why does a dashboard with 10,000 data points run faster on Canvas than SVG?

Canvas uses fewer DOM nodes, reducing browser tracking overhead.

Canvas allows for better CSS styling of individual bars.

SVG cannot handle color hex codes.

Canvas automatically deletes old frames.

QUESTION 5

Once a shape is drawn to a Canvas, what happens to its 'identity'?

It can be selected and moved via standard DOM queries.

It is stored as a persistent object in the browser memory.

It becomes part of the pixel raster and loses its individual identity.

It is automatically converted to an SVG path.